<template>
<!--    组件模版要求有唯一的根标签，这个根标签一般使用div-->
  <div>
      <!--1、插值表达式：最基本的文本插值方法，自动将绑定的数据实时显示出来-->
      <p>{{msg}}</p>
      <!--    在插值表达式中，除了简单的数据绑定之外，还可以使用JavaScript表达式进行简单的计算-->
      <p>{{num % 9}}</p>
      <p>{{flag ? "确定" : "取消"}}</p>
      <p>{{msg}}原有的标签</p>
<!-- 2、v-text:更新元素的文本内容-->
<!--      v-text会覆盖掉标签中原有的内容，但是插值表达式只会替换自己的占位符（部分替换）-->
      <p v-text="msg"></p>
<!-- 3、v-html：更新元素的html结构
              v-text不能识别标签
              v-html可以渲染标签-->
      <div v-text="str"></div>
      <div v-html="str"></div>
<!-- 4、v-bind:属性绑定指令，用于动态绑定标签的属性
            语法：v-bind:属性名="js表达式"
            语法糖（简写）: 简写为英文冒号-->
      <img v-bind:src="imgSrc" alt="" :title="title">
<!--      v-bind绑定class样式
                第一种方式：对象方式：isActive的值为true表示添加样式，为false表示移除样式-->
      <div :class="{active: isActive}">内容1</div>
<!--      第二种方式：使用三元运算符-->
      <div :class="isActive ? 'active' : ''">内容2</div>
<!--      v-bind绑定style样式-->
      <div :style="styles">内容3</div>
  </div>

</template>

<script>
export default {
    name: "BaseCommand01",
    //组件中的data和vue实例的data不同
    //vue中的data是一个对象
    //组件中的data是一个方法，返回一个对象
    data() {
        return {
            //所有的数据定义在这里
            msg: 'hellovue',
            num: 100,
            flag: true,
            str: "<h1>一级标题</h1>",
            imgSrc: require("../../assets/logo.png"),
            title: '你好，Vue',
            isActive: true,
            styles: {
                width: "100px",
                height: "100px",
                //如果使用短横线，要用引号引起来
                backgroundColor: "red"
            }
        }
    }
}
</script>

<style scoped>
    .active {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>